import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import styles from './index.less';

interface RichTextEditorProps {
  value: string;
  onChange: (content: string, html: string) => void;
  placeholder?: string;
}

const RichTextEditor: React.FC<RichTextEditorProps> = ({ 
  value, 
  onChange,
  placeholder = '请输入内容'
}) => {
  const handleChange = (content: string, _delta: any, _source: any, editor: any) => {
    const html = editor.getHTML();
    onChange(content, html);
  };

  return (
    <div className={styles.editorWrapper}>
      <ReactQuill
        theme="snow"
        value={value}
        onChange={handleChange}
        placeholder={placeholder}
        modules={{
          toolbar: [
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered'}, { list: 'bullet' }],
            [{ indent: '-1'}, { indent: '+1' }],
            ['link', 'image'],
            ['clean']
          ],
          clipboard: {
            matchVisual: false
          }
        }}
        formats={[
          'header',
          'bold', 'italic', 'underline', 'strike',
          'list', 'bullet', 'indent',
          'link', 'image'
        ]}
      />
    </div>
  );
};

export default RichTextEditor;